import React from 'react';
import './index.scss';
import {observable, observer, action} from 'mobx.collection';
import $ from 'dom7.collection';
import {formatClassList} from "auxiliaries/extends/format";

window.$$ = $;

@observer
class ReactLine extends React.Component {
    @observable SpreadState = "";

    #MainReactLine;
    #DisplayElement;
    #AbsoluteElement;
    #AbsoluteBackup;

    constructor(props) {
        super(props);

        this.state = {
            children: '',
            textContent: ''
        };
    }

    @action
    onShow() {
        this.SpreadState = this.SpreadState ? "" : "spread";
    }

    componentDidMount() {
        this.#AbsoluteElement = this.#MainReactLine.find(".--absolute");
        this.#AbsoluteBackup = this.#MainReactLine.find(".--absolute-backup");
        this.updateAbsoluteSize();
        $(window).on('resize', () => this.updateAbsoluteSize());
    }

    updateAbsoluteSize() {
        let display = this.#MainReactLine.find('.--display');

        let width = display.outerWidth();

        if (this.#AbsoluteElement.outerWidth() !== width) {
            this.#AbsoluteElement.css('width', width + 'px');
        }

        //todo:要判断是否需要重新更新
        this.countContainer();
    }

    countContainer() {
        let {
            lines = 3,
            ellipsis = "...",
            children,
        } = this.props;

        let origins = this.#AbsoluteBackup.childNodes();
        let list = origins.filter(x =>
            (x?.nodeType === 3 || x?.nodeType === 1) ||
            (x?.nodeType === 3 && x?.textContent?.trim())
        );

        //todo: 待优化
        this.#AbsoluteElement.html('-');
        let linesMaxHeight = this.#AbsoluteElement.height() * lines;
        const span = "<span class='--span'>内容</span>";

        this.#AbsoluteElement.html('');
        this.#DisplayElement.html('');

        for (let node of list) {
            let element;

            switch (node.nodeType) {
                //元素
                case 1:
                    if ($(node).is('br')) {
                        element = node.outerHTML;
                    } else {
                        element = $(span)[0].outerHTML;
                    }
                    break;
                //文本
                case 3:
                    element = node.textContent;
                    break;
                default:
                    element = '';
                    break;
            }

            if (this.#AbsoluteElement.height() > linesMaxHeight) {
                // this.#DisplayElement.append();

            } else {
                this.#AbsoluteElement.append(element);
                this.#DisplayElement.append(element);
            }
        }
    }

    componentWillUnmount() {
        $(window).off('resize');
    }

    componentDidUpdate() {
        this.updateAbsoluteSize();
    }

    render() {
        let {
            children,
            className,
            style,
            ellipsis
        } = this.props;

        let containerList = formatClassList(className, 'font-size-24');
        this.SpreadState && containerList.push(this.SpreadState);

        return (
            <div ref={_ => this.#MainReactLine = $(_)} style={style} className={[
                "--react-line"
            ].concat(containerList).join(' ')}>
                <div className="--absolute-backup">{children}</div>
                <div className="--absolute"/>
                <div className="--display"
                     ref={_ => this.#DisplayElement = $(_)}>{this.state?.container}{ellipsis}</div>
                <div className="--show" onClick={() => this.onShow()}>
                    <span className={"font-size-26"}>{
                        this.SpreadState ? '收起' : '展开'
                    }</span>
                </div>
            </div>
        );
    }
}

export default ReactLine;